<!-- 排序弹窗 -->

<template>
	<benben-popup v-model="isShow" :mask="true" :mask-close-able="true" mode='right' :z-index='999'>
		<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout searchResultsMall_flex_2">
			<view class='flex flex-direction flex-wrap align-stretch searchResultsMall_fd2_0'>
				<text class='searchResultsMall_fd2_0_c0'>筛选</text>
				<view class='flex flex-wrap align-center justify-between'>
					<text class='searchResultsMall_fd2_0_c1_c0'>品牌</text>
					<view v-if="isHaveMorePinpai" class="searchResultsMall_fd2_0_c1_c1 big_tap_area"
						:class="{more:isShowMorePinpai}" @click="isShowPinpaiMoreFn">
						<u-image width="100%" height="100%" shape="circle" border-radius="8rpx" lazy-load
							:src='STATIC_URL+"642.png"' />
					</view>
				</view>
			</view>
			<view class='flex flex-direction flex-wrap align-stretch flex-sub'>
				<benben-select-diy ref="showSelectPopup1698307721854"
					class-name='flex flex-wrap flex searchResultsMall_fd2_1_c0' :items.sync="showPinpaiData"
					v-model="screen_id" default-type="id" default-label="name" :allow-cancel='true' type="radio"
					:disabled='false'>
					<template v-for='(item,key0) in showPinpaiData'>
						<view v-if="item.isSelected"
							class='flex align-center self-center justify-center flex searchResultsMall_fd2_1_c0_c0'
							:key="key0" @tap="$refs.showSelectPopup1698307721854.tapHandle(key0)">
							<text class='searchResultsMall_fd2_1_c0_c0_c0'>{{item.name}}</text>
						</view>
						<view v-else class='flex align-center justify-center flex searchResultsMall_fd2_1_c0_c1'
							:key="key0" @tap="$refs.showSelectPopup1698307721854.tapHandle(key0)">
							<text class='searchResultsMall_fd2_1_c0_c1_c0'>{{item.name}}</text>
						</view>
					</template>
				</benben-select-diy>
			</view>
			<view class='flex flex-direction flex-wrap align-stretch flex-sub'>
				<view class='flex flex-wrap align-center justify-between searchResultsMall_fd2_2_c0'>
					<text class='searchResultsMall_fd2_2_c0_c0'>价格</text>
					<view v-if="isHaveMorePrice" class="searchResultsMall_fd2_0_c1_c1 big_tap_area"
						:class="{more:isShowMorePrice}" @click="isShowPriceMoreFn">
						<u-image width="100%" height="100%" shape="circle" border-radius="8rpx" lazy-load
							:src='STATIC_URL+"642.png"' />
					</view>
				</view>
				<benben-select-diy ref="showSelectPopup1698308297303"
					class-name='flex flex-wrap flex  searchResultsMall_fd2_1_c0' :items.sync="showPriceData"
					v-model="selectPriceId" default-type="id" default-label="name" :allow-cancel='false' type="radio"
					:disabled='false'>
					<template v-for='(item,key0) in showPriceData'>
						<view v-if="item.isSelected"
							class='flex align-center self-center justify-center flex searchResultsMall_fd2_1_c0_c0'
							:key="key0" @tap="$refs.showSelectPopup1698308297303.tapHandle(key0)">
							<text class='searchResultsMall_fd2_1_c0_c0_c0'>{{item.name}}</text>
						</view>
						<view v-else class='flex align-center justify-center flex searchResultsMall_fd2_1_c0_c1'
							:key="key0" @tap="$refs.showSelectPopup1698308297303.tapHandle(key0)">
							<text class='searchResultsMall_fd2_1_c0_c1_c0'>{{item.name}}</text>
						</view>
					</template>
				</benben-select-diy>
			</view>
			<view class='flex flex-wrap align-center justify-center' @click="selectPriceId=''">
				<view class='flex flex-wrap align-center justify-center searchResultsMall_fd2_3_c0'>
					<input class="searchResultsMall_fd2_3_c0_c0" placeholder="0" placeholder-style="color:#999;"
						type="digit" v-model="iptStartPrice">
				</view>
				<view class='flex flex-wrap align-center searchResultsMall_fd2_3_c1'>
				</view>
				<view class='flex flex-wrap align-center justify-center searchResultsMall_fd2_3_c0'>
					<input class="searchResultsMall_fd2_3_c0_c0" placeholder="99999" placeholder-style="color:#999;"
						type="digit" v-model="iptEndPrice">
				</view>
			</view>
			<view class='flex flex-direction flex-wrap align-stretch flex-sub'>
				<view class='flex flex-wrap align-center justify-center searchResultsMall_fd2_4_c0'>
					<button class='searchResultsMall_fd2_4_c0_c0' @click="resetSort">重置</button>
					<button class='searchResultsMall_fd2_4_c0_c1' @click="confirmSort">确定</button>
				</view>
				<view style="height: calc(118rpx + env(safe-area-inset-bottom));"></view>
			</view>
		</view>

	</benben-popup>

</template>

<script>
	/**
	 * SortPopup 排序弹窗
	 * @description Button 排序弹窗
	 * @property {Boolean} value 是否显示
	 * @event {Function} confirm 确认回调
	 * @example <fu-button>Fast-UI</fu-button>
	 */
	import {
		pinPaiModuleMixin
	} from './pinPaiModuleMixin'
	import {
		priceModuleMixin
	} from './priceModuleMixin'
	const GOOD_SORT_DEF = {
		apiPinpai: "",
		apiStartPrice: "",
		apiEndPrice: "",
	};
	export default {
		props: {
			value: Boolean
		},
		mixins: [pinPaiModuleMixin, priceModuleMixin, ],
		computed: {
			isShow: {
				get() {
					return this.value
				},
				set(val) {
					this.$emit("input", val)
				}
			}
		},
		methods: {
			/** 重置排序 */
			resetSort() {
				this.screen_id = "";
				this.iptStartPrice = "";
				this.iptEndPrice = "";
				this.selectPriceId = "";
				this.$emit("confirm", {
					...GOOD_SORT_DEF
				});
				this.isShow = false;
			},
			/** 确认筛选 */
			confirmSort() {
				const result = {
					...GOOD_SORT_DEF,
					apiPinpai: this.screen_id,
					apiStartPrice: "",
					apiEndPrice: "",
				};
				if (this.selectPriceId) {
					const info = this.priceData.find(item => item.id == this.selectPriceId)
					result.apiStartPrice = info.start_price;
					result.apiEndPrice = info.end_price;
				} else {
					result.apiStartPrice = this.iptStartPrice;
					result.apiEndPrice = this.iptEndPrice;
				}
				this.$emit("confirm", result);
				this.isShow = false;
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import "./goodsList.scss";

	::v-deep scroll-view {
		height: 100vh;
		position: relative;
	}
</style>